@import './modules/reset';
@import './modules/header';
// banner
.banner{
	position: relative;
	width: 100%;
	minheight: 200px;
	background-color: wheat;
	img{
		width: 100%;
	}
	&-new{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50px;
		margin: 0 auto;
		width: 760px;
		height: 61px;
		z-index: 99;
		background: url(../images/notice.png)no-repeat center ;
	}
	&-list{
		position: relative;
		width: 500px;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
		h2{
			float: left;
			width:70px ;
			height: 100%;
			font-size:14px ;
			line-height: 61px;
			text-indent: 10px;
			color: white;
			background: url(../images/dian2.png) no-repeat 0 center;
		}
	}
	.prev{
		position: absolute;
		top: 15px;
		left: 40px;
		cursor: pointer;
	}
	.next{
		position: absolute;
		top: 15px;
		right: 40px;
		cursor: pointer;
	}
	&-gong{
		display: inline-block;
		width: 250px;
		height: 61px;
		line-height: 61px;
		color: white;
		cursor: pointer;
		font-size: 12px;
		text-align: center;
		white-space:nowrap;
		
	}
	time{
		float: right;
		height: 61px;
		cursor: pointer;
		line-height: 61px;
		font-size: 12px;
		color: white;
	}
	&-sides{
		position: absolute;
		top: 0;
		right: 100px;
		width: 215px;
		height: 100%;
		background:url(../images/3.jpg)no-repeat 44px 0px;
	}
	&-menu{
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 350px;
		font-size: 14px;
		ul{
			display: flex;
			flex-direction: column;
			li{
				height: 115px;
				cursor: pointer;
				
			}
		
		}
		
	}
	.w20{
		border: 3px solid #FFB244;
	}
	&-itme-img{
		float: left;
		width: 82px;
		height: 82px;
		border: 3px solid white;
		border-radius: 50%;
	 
	}
	&-itme-text{
		float: right;
		height: 82px;
		line-height: 82px;
		font-weight: bolder;
		color: white;
	}
}
// banner结束
// tab选项卡开始
.tab{
	width: 100%;
	min-height: 200px;
	background-color: #F7F7F8;
	padding-top:50px ;
	&-hot{
		position: relative;
		width: 1140px;
		height: 700px;
		margin: 0 auto;
	}
	&-goods{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	.goods-box{
		float: left;
		width: 258px;
		height: 315px;
		margin-right: 26px;
		margin-bottom: 18px;
		background-color: white;
	}
.tab1-top{
	width: 852px;
	height: 315px;
	float: left;
}
.tab1-bottom{
	float: left;
}
.left-top{
	height: 315px;
}
	}
	.title-en{
		font-weight: bold;
		color: #6d6d6d;
		font-size: 14px;
		padding-top: 25px;
		text-align: center;
	}
	.title-hot{
		color: #B6A597;
		font-size: 50px;
		padding-top: 10px;
		text-align: center;
	}
	.title-page{
		color: #B6A597;
		font-size: 30px;
		padding-top: 15px;
		text-align: center;
	}
	.prevNext{
		width: 120px;
		height: 48px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20px;
		div{
			width: 48px;
			height: 48px;
			line-height: 48px;
			text-align: center;
			color: #B6A597;
			font-size: 26px;
			cursor: pointer;
			border-radius: 50%;
			background-color: #e6e6e6;
		}
	}
	.goods-img{
		display: inline-block;
		width: 100%;
		height: 258px;
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
		}
		&:hover img{
			transition: all 2s;
			transform: scale(1.2);
		}
	}
	.goods-name{
		display:block;
		width: 100%;
		text-align: center;
		color: #9A8069;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		padding-top:5px ;
		font-size: 16px;
		text-overflow: ellipsis
		
	}
	.goods-price{
		display: block;
		color: #E75014;
		font-size: 14px;
		font-weight: bold;
		padding-top:8px ;
		text-align: center;
		text-decoration: none;
	}
	&-left{
		width: 580px;
		height: 650px;
		display: flex;
		flex-wrap: wrap;
		padding-top: 5px;
	}
	&-right{
		width: 558px;
		height: 650px;
		padding-top: 5px;
		background-color:white;
		.goods-img{
			width: 100%;
			height: 558px
		}
		.goods-name{
			margin-top: 10px;
			font-size: 20px;
		}
		.goods-price{
			font-size: 18px;
		}
	}
	.goods-name:hover{
		text-decoration:underline;
	}
	.hui{
		background-color: #F7F7F8;
	}
	&-menu{
		position: absolute;
		left: 50%;
		bottom: 12px;
		li{
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: #e6e6e6;
			margin-right: 10px;
			cursor: pointer;
			float: left;
		}
	}
	.yuan{
		background-color: #b6a597;
	}
	
}

// 选项卡结束
// 选项卡2开始
.tab2{
	width: 100%;
	min-height: 200px;
	margin-bottom: 10px;
	&-title{
		width: 1120px;
		margin: 0 auto;
		.title-en{
			font-weight: bold;
			color: #6d6d6d;
			font-size: 14px;
			padding-top: 25px;
			text-align: center;
		}
		.title-hot{
			color: #B6A597;
			font-size: 50px;
			padding-top: 10px;
			text-align: center;
		}
		.title-page{
			color: #B6A597;
			font-size: 30px;
			padding-top: 15px;
			text-align: center;
		}
	}
	&-shop-links{
		width: 1120px;
		margin: 0 auto;
		margin-bottom: 20px;
		display: flex;
		justify-content: flex-end;
		ul{
			width: 810px;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			li{
				position: relative;
				width: 99px;
				height: 39px;
				cursor: pointer;
				line-height: 39px;
				text-align: center;
				color: #B6A597;
				font-size: 14px;
				border: 1px solid #b5a597;
			
			
			}
			.sanjiao{
				background-color:#FA7C3D;
				color: white;
			}
			.sanjiao::after{
							content: '';
							display: inline-block;
							width: 0;
							height: 0;
							border: 8px solid transparent;
							border-top: 8px solid #FA7C3D;
							position: absolute;
							top: 38px;
							left: 50%;
							margin-left: -8px;
							
						}
		}
		.more{
			display: inline-block;
			width: 136px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			margin-left: 20px;
			text-decoration: none;
			border-radius: 30px;
			font-size: 14px;
			color: #B6A597;
			border: 1px solid #bca787;
		}
	}
	&-shop-box{
		width: 1128px;
		height: 800px;
		margin: 0 auto;
	}
	&-shophover{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		li{
			float: left;
			width: 272px;
			height: 375px;
			padding-top:2px ;
			background-color: #f5f5f5;
			margin-top: 10px;
			margin-right: 10px;
			&:hover img{
				transition: all 2s;
				transform: scale(1.2);
			}
		}
	}
	&-img{
		display: inline-block;
		width: 100%;
		height: 290px;
		overflow: hidden;
	}
	&-hover{
		width: 272px;
		height: 272px;
		margin-bottom: 16px;
	}
	&-text{
		display: inline-block;
		width: 100%;
		height: 28px;
		line-height: 28px;
		text-decoration: none;
		text-align: center;
		color: #000000;
	}
	&-pic{
		text-align: center;
		font-size: 14px;
		margin-top: 10px;
		color: #E75014;
	}
}
// 品牌
.tab3{
	width: 100%;
	min-height: 200px;
	background-color: #F7F7F8;
	padding: 20px 0;
	&-title{
		position: relative;
		width: 1210px;
		margin: 0 auto;
		.title-en{
			font-weight: bold;
			color: #6d6d6d;
			font-size: 14px;
			padding-top: 25px;
			text-align: center;
		}
		.title-hot{
			color: #B6A597;
			font-size: 50px;
			padding-top: 10px;
			text-align: center;
		}
		.title-page{
			color: #B6A597;
			font-size: 30px;
			padding-top: 15px;
			text-align: center;
		}
		.more{
			position: absolute;
			top:14%;
			bottom: 0;
			right: 50px;
			margin: 0 auto;
			display: inline-block;
			width: 136px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			margin-left: 20px;
			text-decoration: none;
			border-radius: 30px;
			font-size: 14px;
			color: #B6A597;
			border: 1px solid #bca787;
		}
		
		.banner1{
		float: left;
		display: inline-block;
		width: 600px;
		height: 100%;
	}
	.banner2{
		float: left;
		display: inline-block;
		width: 600px;
		height: 100%;
	}
}
&-bann{
			width: 1210px;
			height: 400px;
			padding-top: 40px;
		}
}
.tab4{
	width: 100%;
	min-height: 200px;
	padding: 20px 0;
	overflow: hidden;
	&-title{
		position: relative;
		width: 1210px;
		margin: 0 auto;
		.title-en{
			font-weight: bold;
			color: #6d6d6d;
			font-size: 14px;
			padding-top: 25px;
			text-align: center;
		}
		.title-hot{
			color: #B6A597;
			font-size: 50px;
			padding-top: 10px;
			text-align: center;
		}
		.title-page{
			color: #B6A597;
			font-size: 30px;
			padding-top: 15px;
			text-align: center;
		}
		.more{
			position: absolute;
			top:14%;
			bottom: 0;
			right: 50px;
			margin: 0 auto;
			display: inline-block;
			width: 136px;
			height: 38px;
			line-height: 38px;
			text-align: center;
			margin-left: 20px;
			text-decoration: none;
			border-radius: 30px;
			font-size: 14px;
			color: #B6A597;
			border: 1px solid #bca787;
		}
	}
	&-list{
		overflow: hidden;
		width: 1482px;
		min-height:200px;
		display: flex;
		margin: 0 auto;
		li{
			overflow: hidden;
			margin-top:10px ;
			margin-right: 37px;
			width: 272px;
			height: 375px;
			padding-top:2px ;
			background-color: #F5F5F5;
		}
	}
	&-img{
		overflow: hidden;
		display: inline-block;
		width: 290px;
		
		img{
			width: 272px;
			height: 272px;
			margin-bottom: 16px;
		}
		&:hover img{
			transition: all 2s;
			transform: scale(1.2);
		}
	}
	&-text{
		display: inline-block;
		width: 100%;
		height: 28px;
		line-height: 28px;
		text-decoration: none;
		text-align: center;
		color: #000000;
	}
	&-pic{
		text-align: center;
		font-size: 14px;
		margin-top: 10px;
		color: #E75014;
	}
	
}
@import './modules/footer';